<template>
  <div class="self_adaption">
    <div class="other">
      <p class="main_text" style="font-size: 18px">交易管理</p>
    </div>
    <div class="t_container">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="交易设置" name="first">
          <el-form :model="transactionSetup" label-width="160px">
            <el-form-item label="订单秒杀时:">
              订单秒杀后&nbsp;&nbsp;
              <el-input
                @blur="transactionInput(ShopMes.killOrderLimitTime)"
                v-model="ShopMes.killOrderLimitTime"
                style="width: 60px"
                :disabled="!transactionEdit" />&nbsp;&nbsp;分钟内未付款，自动取消秒杀订单
            </el-form-item>
            <el-form-item label="开发票:">
              <el-radio-group v-model="ShopMes.openInvoice" class="ml-4">
                <el-radio :label="false" size="large" :disabled="!transactionEdit">拒绝</el-radio>
                <el-radio :label="true" size="large" :disabled="!transactionEdit">启用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="七天无理由退换货:">
              <el-radio-group v-model="ShopMes.sevenRefund" class="ml-4">
                <el-radio :label="false" size="large" :disabled="!transactionEdit">拒绝</el-radio>
                <el-radio :label="true" size="large" :disabled="!transactionEdit">启用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="运费险:">
              <el-radio-group v-model="ShopMes.freightInsurance" class="ml-4">
                <el-radio :label="false" size="large" :disabled="!transactionEdit">拒绝</el-radio>
                <el-radio :label="true" size="large" :disabled="!transactionEdit">启用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="免邮费:">
              <el-radio-group v-model="ShopMes.payShippingFee" class="ml-4">
                <el-radio :label="false" size="large" :disabled="!transactionEdit">拒绝</el-radio>
                <el-radio :label="true" size="large" :disabled="!transactionEdit">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div class="bottom_btn" v-show="transactionEdit">
            <el-button class="solid" @click="TransactionSure">保存</el-button>
            <el-button class="hollow" @click="TransactionCancle">取消</el-button>
          </div>
          <div class="bottom_btn" v-show="!transactionEdit">
            <el-button class="solid" @click="transactionEdit = !transactionEdit" style="width: 120px">修改</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="运费模板" name="second">
          <el-button class="solid" @click="Add">增加模板表单</el-button>
          <el-form ref="ruleFormRef" :rules="rules" label-width="120px" :size="formSize" status-icon>
            <el-table
              :data="setShippingFeeSettings"
              border
              style="width: 100%; margin-top: 20px"
              :show-overflow-tooltip="true">
              <el-table-column label="模板名称" width="180">
                <template #default="item">
                  <el-input
                    v-model="item.row.settingName"
                    style="width: 120px; height: 40px"
                    placeholder="请输入运费模板"
                    :disabled="!item.row.btn"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="快递公司" width="160">
                <template #default="item">
                  <el-select
                    v-model="item.row.companyName"
                    class="m-2"
                    placeholder="快递公司"
                    size="large"
                    :disabled="!item.row.btn">
                    <el-option v-for="item in companyName" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="区域设置">
                <template #default="item">
                  <el-select
                    v-model="item.row.region"
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    placeholder="Select"
                    style="width: 240px"
                    :disabled="!item.row.btn">
                    <el-option v-for="item in area" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="运费" width="240">
                <template #default="item">
                  <el-input
                    @blur="freightInput(item.row.shippingPrice)"
                    v-model="item.row.shippingPrice"
                    style="width: 200px; height: 40px"
                    placeholder="邮费"
                    :disabled="!item.row.btn"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="item">
                  <div v-if="!item.row.btn">
                    <el-button size="small" class="none" @click="Edit(item.$index)">修改</el-button>
                    <el-popconfirm
                      confirm-button-text="是"
                      cancel-button-text="否"
                      :icon="InfoFilled"
                      @confirm="Delete(item.row.id)"
                      icon-color="#626AEF"
                      title="是否确认删除?">
                      <template #reference>
                        <el-button size="small" class="none_del">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </div>
                  <div v-else>
                    <el-button size="small" class="none" @click="Sure(item.row, item.$index)">确认</el-button>
                    <el-button size="small" class="none_del" @click="Cancle(item.$index)">取消</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue';
import type {TabsPaneContext} from 'element-plus';
import {
  RequestAllShopSetting,
  RequestShopTransactionEdit,
  RequestShopFeeSetting,
  RequestShopFeeSettingDel,
} from '@/api/path/index.js';
import {ElMessage} from 'element-plus';

const transactionSetup = ref({});
const btn = ref(false);
const shopId = Number(localStorage.getItem('ShopId'));
const ShopMes = ref<any>({});
const setShippingFeeSettings = ref<any>([]); //运费模板数组
const activeName = ref('first'); //进来先显示的页面
const transactionEdit = ref(false); //是否正在修改交易设置部分
const verify = ref(false); //判断订单秒杀正则是否通过
const freight = ref(false); //判断订单秒杀正则是否通过

/**
 * 订单秒杀的正则验证
 */
const transactionInput = (value: any) => {
  const regex = /^\d+(\.\d{1,2})?$/;
  if (!regex.test(value)) {
    verify.value = false;
  } else {
    verify.value = true;
  }
};
/**
 * 交易设置取消修改
 */
const TransactionCancle = () => {
  requestAllShopSetting();
  transactionEdit.value = !transactionEdit.value;
};
/**
 * 交易设置确认
 */
const TransactionSure = () => {
  transactionInput(ShopMes.value.killOrderLimitTime);
  if (!verify.value) {
    ElMessage.error('请输入正确的时间');
  } else {
    const a = {
      id: ShopMes.value.id,
      shopId: shopId,
      killOrderLimitTime: ShopMes.value.killOrderLimitTime,
      openInvoice: ShopMes.value.openInvoice,
      sevenRefund: ShopMes.value.sevenRefund,
      freightInsurance: ShopMes.value.freightInsurance,
      payShippingFee: ShopMes.value.payShippingFee,
    };
    new Promise((resolve, reject) => {
      RequestShopTransactionEdit(a)
        .then((res: any) => {
          ElMessage.success(res.msg);
          requestAllShopSetting();
          transactionEdit.value = !transactionEdit.value;
          console.log(res);
        })
        .catch((err: any) => {
          ElMessage.error('修改失败');
          reject(err);
        });
    });
  }
};
/**
 * 运费的正则验证
 */
const freightInput = (value: any) => {
  const regex = /^\d+(\.\d{1,2})?$/;
  if (!regex.test(value)) {
    freight.value = false;
  } else {
    freight.value = true;
  }
};
/**
 * 公司选择器
 */
const companyName = [
  {
    value: '圆通',
    label: '圆通',
  },
  {
    value: '申通',
    label: '申通',
  },
  {
    value: '中通',
    label: '中通',
  },
];
/**
 * 区域选择器
 */
const area = [
  {
    value: '北京市',
    label: '北京市',
  },
  {
    value: '天津市',
    label: '天津市',
  },
  {
    value: '上海市',
    label: '上海市',
  },
  {
    value: '河北省',
    label: '河北省',
  },
  {
    value: '山西省',
    label: '山西省',
  },
  {
    value: '辽宁省',
    label: '辽宁省',
  },
  {
    value: '吉林省',
    label: '吉林省',
  },
  {
    value: '黑龙江省',
    label: '黑龙江省',
  },
  {
    value: '江苏省',
    label: '江苏省',
  },
  {
    value: '浙江省',
    label: '浙江省',
  },
  {
    value: '安徽省',
    label: '安徽省',
  },
  {
    value: '福建省',
    label: '福建省',
  },
  {
    value: '江西省',
    label: '江西省',
  },
  {
    value: '山东省',
    label: '山东省',
  },
  {
    value: '河南省',
    label: '河南省',
  },
  {
    value: '河南省',
    label: '河南省',
  },
  {
    value: '湖南省',
    label: '湖南省',
  },
  {
    value: '广东省',
    label: '广东省',
  },
  {
    value: '海南省',
    label: '海南省',
  },
  {
    value: '四川省',
    label: '四川省',
  },
  {
    value: '贵州省',
    label: '贵州省',
  },
  {
    value: '云南省',
    label: '云南省',
  },
  {
    value: '陕西省',
    label: '陕西省',
  },
  {
    value: '甘肃省',
    label: '甘肃省',
  },
  {
    value: '台湾省',
    label: '台湾省',
  },
  {
    value: '内蒙',
    label: '内蒙',
  },
  {
    value: '广西',
    label: '广西',
  },
  {
    value: '宁夏',
    label: '宁夏',
  },
  {
    value: '新疆',
    label: '新疆',
  },
  {
    value: '香港',
    label: '香港',
  },
  {
    value: '澳门',
    label: '澳门',
  },
];
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
/**
 * 挂在
 */
onMounted(() => {
  requestAllShopSetting();
});
/**
 * 获取设置信息
 */
const requestAllShopSetting = async () => {
  const a = await RequestAllShopSetting(shopId);
  console.log('获取成功', a.resultObj);
  ShopMes.value = a.resultObj;
  setShippingFeeSettings.value = a.resultObj.shippingFeeSettings;
  for (let i = 0; i < setShippingFeeSettings.value.length; i++) {
    setShippingFeeSettings.value[i].btn = false;
  }
};
/**
 * 点击添加模板
 */
const Add = () => {
  setShippingFeeSettings.value[setShippingFeeSettings.value.length] = {
    companyName: '',
    region: '',
    shippingPrice: '',
    btn: true,
  };
};
/**
 * 点击修改运费模板
 */
const Edit = (index: number) => {
  setShippingFeeSettings.value[index].btn = true;
};
/**
 * 修改运费模板确认
 */

let loading = ref(false); //设置记录时间，用于防抖
let timer = ref(null); //设置记录时间，用于防抖
const Sure = (item: any, index: number) => {
  if (timer != null) {
    clearTimeout(timer);
  }
  timer = setTimeout(async () => {
    loading.value = true;
    if (item.companyName === '') {
      ElMessage.error('请选择快递公司');
    } else if (item.region.length === 0) {
      ElMessage.error('请选择区域');
    } else if (item.shippingPrice === '') {
      ElMessage.error('请设置运费');
    } else {
      freightInput(item.shippingPrice);
      if (freight.value === false) {
        ElMessage.error('请输入正确的运费');
      } else {
        new Promise((resolve, reject) => {
          RequestShopFeeSetting(a)
            .then((res: any) => {
              ElMessage.success(res.msg);
              requestAllShopSetting();
              console.log(res);
              loading.value = false;
            })
            .catch((err: any) => {
              ElMessage.error('修改失败');
              reject(err);
              loading.value = false;
            });
        });
        setShippingFeeSettings.value[index].btn = false;
        btn.value = false;
      }
    }
  }, 500);
  const a = {
    id: item.id,
    settingName: item.settingName,
    shopId: shopId,
    companyName: item.companyName,
    shippingPrice: item.shippingPrice,
    region: item.region,
  };
};
/**
 * 修改运费模板取消
 */
const Cancle = (index: number) => {
  setShippingFeeSettings.value[index].btn = false;
  requestAllShopSetting();
};
/**
 * 点击删除运费模板
 */
const Delete = (id: number) => {
  new Promise((resolve, reject) => {
    RequestShopFeeSettingDel(id)
      .then((res: any) => {
        ElMessage.success(res.msg);
        requestAllShopSetting();
        console.log(res);
      })
      .catch((err: any) => {
        ElMessage.error('删除失败');
        reject(err);
      });
  });
};
</script>

<style scoped>
.t_container {
  width: 99%;
  height: 90%;
  background: #fff;
  margin: 0 auto;
  padding: 0 20px;
  color: #606266;
  .el-form {
    margin-top: 30px;
  }
  .box {
    max-height: 350px;

    overflow-y: scroll;
    /* background: #f0f6fe; */
    border-radius: 5px;
    .content {
      padding: 20px 200px 40px 30px;
      position: relative;
      .el-icon {
        font-size: 20px;
        color: #116cf8;
        margin-left: 10px;
      }
      .add {
        width: 200px;
        position: absolute;
        bottom: 48px;
        right: 10px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
      }
      .add1 {
        position: absolute;
        bottom: 50px;
        right: 160px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
      }
    }
  }
}
:deep(.el-tabs__content) {
  width: 100%;
  height: 90%;
  position: relative;
}
.demo-tabs {
  width: 100%;
  height: 100%;
  position: relative;
  .bottom_btn {
    width: 200px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -100px;
  }
}
</style>
